.container{
  width: 100%;
  height: 100%;
  padding: 10px 0;
  display: flex;
  .left{
    width: 41.4%;
    background:linear-gradient(133deg, rgba(245, 245, 251, 1) 0%, rgba(221, 226, 242, 1) 100%);
    height:100%;
    padding: 20px;
    margin-left: 10px;
    background: url('../assets/userCenterBg.jpg') center / 100% 100% no-repeat;
    .card{
      width:100%;
      height:220px;
      background:rgba(255, 255, 255, 1);
      text-align: center;
      padding-top: 45px;
      color: #666666;
      font-size: 14px;
      p{
        padding-top: 15px;
      }
      img{
        width: 60px;
        height: 60px;
      }
      .avatar{

      }
      .name{
        font-size: 20px;
        color: #333333;
      }
    }
  }
  .right{
    width: 58.6%;
    height: 100%;
    padding: 3px 20px 0 20px;
    .title{
      font-size:16px;
      font-weight:bold;
      color:rgba(51, 51, 51, 1);
      border-bottom: 1px solid #E4E4E4;
      padding-bottom: 13px;
    }
    :global{
      .el-button {
        width: 60px;
        font-size: 14px;
        padding: 0;
        height: 28px;
        &.el-button--text{
          height: 17px;
        }
        &.primary{
          background: #307BF6;
          min-width: 80px;
          &:hover{
            background: #409EFF;
          }
        }
      }
      .info-form{
        padding: 40px;
        .el-form-item__label{
          font-size:14px;
          font-weight:400;
          color:rgba(163, 163, 163, 1);
          line-height:20px;
        }
        .el-form-item__content {
          font-size:14px;
          font-weight:500;
          color:rgba(51, 51, 51, 1);
          line-height:20px;
        }
      }
    }
    .editForm{
      padding: 40px;
      :global{
        .footer{
          padding-left: 82px;
          .el-button{
            width: 80px;
          }
        }
        .el-form-item__label {
          font-size: 14px;
          font-weight: 400;
          color: rgba(163, 163, 163, 1);
          line-height: 28px;
          padding-right: 16px;
        }

        .el-form-item__content {
          font-size: 14px;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
          line-height: 20px;
          .el-input,
          .el-select {
            margin: 10px;
            margin-top: 0;
            margin-bottom: 0;
            box-sizing: border-box;
            width: 320px;

            .el-input {
              margin: 0;

              .el-input__suffix {
                height: 28px;
                line-height: 28px;
                top: 0;
              }

              .el-input__inner {
                width: 320px;
                height: 28px;
                line-height: 28px;
                padding-left: 6px;
                border-radius: 0;
                font-size: 14px;
                padding: 0 6px;

                .el-input__icon {
                  line-height: 28px;
                }
              }
            }

            .el-input__inner {
              width: 320px;
              height: 28px;
              line-height: 28px;
              padding-left: 6px;
              border-radius: 0;
              font-size: 14px;

              .el-input__icon {
                line-height: 28px;
              }
            }
              &.input-code {
                width: 205px;
                .el-input__inner {
                  width: 205px;
                }
              }
          }
        }
        .el-form-item__error{
          left: 10px;
        }
      }
       .mobileCode {
         width: 107px;
         height: 28px;
         margin-left: -2px;
         color: #1592FF;
         font-size: 14px;
         vertical-align: bottom;
         border: 1px solid;
         cursor: pointer;
         outline: none;
         background-color: transparent;

         &[disabled] {
           pointer-events: none;
           color: #C5C5C5;
         }
       }
    }
  }
}